<template>
	<view class="control">
		<!-- <QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(47, 117, 250, 0)"></QSNavbar>
		<view class="header">
			<image mode="widthFix"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e97b04390cc0b2a1f3830807ac38b0ac8014ee59.png" />
			
		</view> -->
		<u-sticky>
			<u-tabs :list="tabList" lineColor="#4786fe" :activeStyle="{
		  color: '#2f75fa',
		}" :inactiveStyle="{
		  color: '#353535',
		}" :lineWidth="30" :current="tabActive" @click="changeTab" />
		</u-sticky>

		<view class="main">
			<!-- <u-tabs @click="changeTab" :list="tabList" lineWidth="50"
				:activeStyle="{color:'rgb(47,117,250)',fontWeight:700}"></u-tabs> -->
			<view class="con" v-if="list.length">
				<view class="list" v-show="tabActive === 0">
					<view class="item" v-for="(item,index) in list" :key="index">
						<u--image :src="item.race_img" width="100%" height="33.5vw">
						</u--image>
						<view class="detail">
							<view class="detail-1 flex-align">
								<view class="tag" v-if="item.sign_up_type == 1">个人赛</view>
								<view class="tag" v-if="item.sign_up_type == 2">赛队</view>
								<view class="tag" v-if="item.sign_up_type == 3">组队赛</view>
								<view>{{item.race_name}}</view>
							</view>
							<!-- 个人赛 -->
							<view class="detail-list flex-align" v-if="item.sign_up_type == 1" @click="teamgrlist(item)">
								<view class="">
									<image style="width: 60rpx;height: 60rpx;border-radius: 50%;" :src="item.member[0].avatar"
										mode=""></image>
									<image
										style="width: 60rpx;height: 60rpx;border-radius: 50%;position: absolute;z-index: 9;left: 40rpx;"
										:src="item.member[1].avatar" mode=""></image>
								</view>
								<view style="margin-left: 50rpx;">共{{item.member.length}}名成员</view>
								<image
									style="width: 30rpx;height: 30rpx;border-radius: 50%;position: absolute;z-index: 9;right: 10rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/31138dec953ff8ad27c4ee1ba72e0f49149f2c6d.png"
									mode=""></image>
							</view>
							<!-- 组队赛 -->
							<view class="detail-list flex-align" v-if="item.sign_up_type == 3"  @click="teamzdlist(item)">
								<view class="">
									<image style="width: 80rpx;height: 80rpx;margin-top: 10rpx;" :src="item.team[0].team_logo"
										mode=""></image>
								</view>
								<view class="" style="margin-left: 10rpx;">
									<view style="margin-bottom: 20rpx;">{{item.team[0].team_name}}</view>
									<text
										style="padding: 4rpx 10rpx;background-color: #FF8F05;color: #ffffff;">{{item.team[0].team_type}}</text>
									<text
										style="padding: 4rpx 10rpx;background-color: #9CB5FF;color: #ffffff;margin-left: 10rpx;">{{item.team[0].city}}</text>
								</view>
								<view class="" style="margin-left: 40rpx;">
									<image style="width: 60rpx;height: 60rpx;border-radius: 50%;" :src="item.member[0].avatar"
										mode=""></image>
									<image
										style="width: 60rpx;height: 60rpx;border-radius: 50%;position: absolute;z-index: 9;left: 60%;"
										:src="item.member[1].avatar" mode=""></image>
								</view>
								<view style="margin-left: 50rpx;">共{{item.member.length}}名成员</view>
								<image
									style="width: 30rpx;height: 30rpx;border-radius: 50%;position: absolute;z-index: 9;right: 10rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/31138dec953ff8ad27c4ee1ba72e0f49149f2c6d.png"
									mode=""></image>
							</view>
							<!-- 赛队-->
							<view class="detail-list flex-align" v-if="item.sign_up_type == 2">
								<view class="">
									<image style="width: 80rpx;height: 80rpx;margin-top: 10rpx;" :src="item.team[0].team_logo"
										mode=""></image>
								</view>
								<view class="" style="margin-left: 10rpx;">
									<view style="margin-bottom: 20rpx;">{{item.team[0].team_name}}</view>
									<text
										style="padding: 4rpx 10rpx;background-color: #FF8F05;color: #ffffff;">{{item.team[0].team_type}}</text>
									<text
										style="padding: 4rpx 10rpx;background-color: #9CB5FF;color: #ffffff;margin-left: 10rpx;">{{item.team[0].city}}</text>
								</view>
							</view>
							<view class="detail-2">
								<!-- <view style="float: left; width: 22%;height: 60rpx;background-color: #2f75fa1a;border-radius: 30rpx;">
									<image style="float: left;width: 60rpx; height: 60rpx;border-radius: 50%;" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16594248632239150855.png" mode=""></image>
									<view  style="float: right;line-height: 60rpx;color: #333333;margin-right: 6rpx;">
										李商隐
									</view>
								</view> -->
								<view style="float: left;width: 85%;height: 60rpx;margin-top: 15rpx;">
									赛事时间：{{item.start_time}}-{{item.end_time}}
								</view>

							</view>
							<!-- <view class="detail-3 flex-align">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9fd7a29f6b8ebf611ac78c59b6f6af9b9144a385.png">
								</image>
								<text>大连体育馆第一用词</text>
							</view> -->
							<!-- <navigator :url="`/pages/personal/qrcode/qrcode?id=${item.id}&title=我的场地&choose=选择场地`" -->
							<!-- <navigator -->
							<view @click="href(item)"
								style="width: 100rpx; height: 100rpx;margin-top: -105rpx;float: right;">
								<view class="qrcode" style="margin-left: 50rpx;margin-top: 50rpx;">
									<u-image :src="`${assetsPath}fdacef21716adb6bb50e280a9351814e2327e9fd.png`"
										width="52rpx" height="52rpx"></u-image>
								</view>
							</view>
							<!-- </navigator> -->
						</view>
					</view>
				</view>
				<view class="list" v-show="tabActive === 1">
					<view class="item" v-for="(item,index) in list" :key="index">
						<u--image :src="item.race_img" width="100%" height="33.5vw">
						</u--image>
						<view class="detail">
							<view class="detail-1 flex-align">
								<view class="tag" style="background-color: #c7c7c7;" v-if="item.sign_up_type == 1">个人赛
								</view>
								<view class="tag" style="background-color: #c7c7c7;" v-if="item.sign_up_type == 2">赛队
								</view>
								<view class="tag" style="background-color: #c7c7c7;" v-if="item.sign_up_type == 3">组队赛
								</view>
								<view style="color: #c7c7c7;">{{item.race_name}}</view>
							</view>
							<view class="detail-2" style="color: #c7c7c7;">
								<view style="float: left;width: 85%;height: 60rpx;margin-top: 15rpx;">
									赛事时间：{{item.start_time}}-{{item.end_time}}
								</view>
							</view>
							<!-- <view style="float: left;width: 50%;height: 60rpx;margin-left: 20rpx;margin-top: 15rpx;">
								开赛时间：7月1日-7月1日
							</view> -->
							<!-- <view class="detail-3 flex-align">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9fd7a29f6b8ebf611ac78c59b6f6af9b9144a385.png">
								</image>
								<text>大连体育馆第一用词</text>
							</view> -->
						</view>
					</view>
				</view>

			</view>
			<u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</view>

	</view>
</template>

<script>
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	const personal = require('@/api/personal/index.js')
	export default {
		components: {
			QSNavbar,
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '我的赛包',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				tabActive: 0,
				tabList: [{
						name: '已报名'
					},
					{
						name: '已结束'
					}
				],
				listQuery: { //分页
					limit: 10,
					page: 1,
				},
				totalPage: "",
				list: [],
			}
		},
		onLoad() {
			this.getMyEnroll()
		},
		methods: {
			// 个人详情
			teamgrlist(item){
				uni.navigateTo({
					url:'/page_points/match_team/match_team?enroll_id=' + item.rid
				})
			},
			// 组队详情
			teamzdlist(item){
				uni.navigateTo({
					url:'/page_points/match_team/match_team?enroll_id=' + item.rid
				})
			},
			changeTab(data) {
				this.tabActive = data.index
				this.list = []
				this.getMyEnroll()
			},
			href(item) {
				// uni.navigateTo({
				// 	url:'/pages_a/my-event/event-detail/event-detail'
				// })
				uni.navigateTo({
					url: './event_code?id=' + item.rid
				})
			},
			async getMyEnroll() {
				let that = this;
				if (that.listQuery.page === 1) that.list = [];
				let postData = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					status: this.tabActive,
					open_id: uni.getStorageSync('openid'),
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				};
				let res = await personal.getMyEnroll(postData);
				if (res.code == 1) {
					that.list = that.list.concat(res.data.result.data); //将数据拼接在一起
					that.totalPage = res.data.result.result
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.getMyEnroll()
			},
		}
	}
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: auto;

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;
			// margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		// /deep/ .QS-navbar {
		// 	position: fixed;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: 5;
		// }

		// .header {
		// 	position: relative;

		// 	>image {
		// 		width: 100%;
		// 	}

		// 	.info {
		// 		width: 100%;
		// 		height: 100%;
		// 		position: absolute;
		// 		top: -5%;
		// 		padding: 0px 30rpx;
		// 		left: 0;

		// 		.info-name {
		// 			color: rgb(234, 248, 248);
		// 			font-size: 36rpx;
		// 			font-weight: 700;
		// 		}

		// 		.info-tel {
		// 			margin-top: 19rpx;
		// 			color: rgb(234, 248, 248);
		// 			font-size: 26rpx;
		// 			font-weight: 500;
		// 		}

		// 		.select {
		// 			margin-left: 19rpx;
		// 			width: 100rpx;
		// 			height: 100rpx;
		// 			color: rgb(234, 248, 248);
		// 			font-size: 24rpx;
		// 			font-weight: 500;
		// 			background: rgba(40, 40, 40, 0.2);
		// 			border-radius: 50%;
		// 			flex-direction: column;

		// 			text {
		// 				margin-top: 10rpx;
		// 			}
		// 		}
		// 	}
		// }

		.main {
			width: 100%;
			flex: 1;
			height: 0;
			// margin-top: -360rpx;
			position: relative;
			display: flex;
			flex-direction: column;

			// /deep/.u-tabs__wrapper__scroll-view {
			// 	// border-radius: 30rpx 30rpx 0px 0px;
			// 	background-color: white;

			// 	.u-tabs__wrapper__nav__item {
			// 		flex: 1;
			// 	}
			// }
			// /deep/.u-tabs {
			// 	background-color: #fff;
			// 	border-bottom: 1px solid #e5e5e5;

			// 	.u-tabs__wrapper__nav__item {
			// 		flex: 1;
			// 	}

			// 	.u-tabs__wrapper__nav__line {
			// 		bottom: 0;
			// 	}
			// }

			.con {
				padding: 30rpx 30rpx 0rpx;
				background-color: rgb(243, 243, 243);
				border-radius: 0px 0px 30rpx 30rpx;
				overflow: auto;
				flex: 1;

				.list {
					.item {
						margin-bottom: 30rpx;
						border-radius: 5rpx;
						overflow: hidden;

						.detail {
							background-color: #ffffff;
							padding: 20rpx;
							// background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fdacef21716adb6bb50e280a9351814e2327e9fd.png");
							background-size: 52rpx 52rpx;
							background-position: calc(100% - 20rpx) calc(100% - 20rpx);
							background-repeat: no-repeat;

							.detail-1 {
								color: #333333;
								font-size: 28rpx;
								font-weight: 500;

								.tag {
									color: #ffffff;
									font-size: 22rpx;
									font-weight: 500;
									white-space: nowrap;
									padding: 3rpx 5rpx;
									margin-right: 10rpx;
									background-color: #3076fa;
									border-radius: 5rpx;
								}
							}

							.detail-list {
								width: 100%;
								height: 70rpx;
								margin-top: 17rpx;
								color: #bebebe;
								font-size: 22rpx;
								font-weight: 500;
								position: relative;
							}

							.detail-2 {
								width: 100%;
								height: 70rpx;
								margin-top: 17rpx;
								color: #bebebe;
								font-size: 22rpx;
								font-weight: 500;
							}

							.detail-3 {
								color: #999999;
								font-size: 22rpx;
								margin-top: 20rpx;

								image {
									width: 27rpx;
									height: 31rpx;
									margin-right: 13rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
